import React, { Component } from "react";
import { connect } from "react-redux";

class List extends Component {
  addArticle = () => {
      this.props.addArticle();
  }
  render() {
    console.log(this.props);
    const { list } = this.props;
    return (
      <div>
        <h1>List</h1>
        <ul>
          {list.map((item, index) => {
            return (
              <li key={index.toString()}>
                <p>{item.title}</p>
                <p>{item.body}</p>
              </li>
            );
          })}
        </ul>
        <button onClick={this.addArticle}>新增文章</button>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    list: state.articles,
  };
};

function mapDispatchToProps(dispatch) {
  return {
    addArticle: () => dispatch({type:'ADD_ARTICLE',article: {title: 'newPost',body: '23232'}}),
  };
}

const ListContainer = connect(mapStateToProps, mapDispatchToProps)(List);
export default ListContainer;
